<template>
  <div>
    <van-tabs title-active-color="#333" type="false">
      <van-tab title="综合排序">
        <ul>
          <li @click="toDetail(id,item)" v-for="item in sales" :key="item.id">
            <!-- 列表上部分 -->
            <div class="listtop">
              <div class="left">
                <img v-lazy="item.img"/>
              </div>
              <div class="right">
                <h2>
                  {{ item.name }}
                  <span>...</span>
                </h2>
                <p>
                  <van-rate :size="5" color="gold" void-icon="star" void-color="gold" />4.3月售8716单
                </p>
                <p>
                  ￥35起送|配送￥5
                  <span>4.59km|52分钟</span>
                </p>
              </div>
            </div>
            <!-- 列表下部分 -->
            <div class="listbom">
              <div class="bomleft">
                <div class="bomtext">
                  <span>盖浇饭</span>
                </div>
                <div class="bomp">
                  <p>
                    <span>减</span> 满25元减15元，满40元减17元，满58...
                  </p>
                  <p>
                    <span>特</span> 特价商品0.88元起
                  </p>
                </div>
              </div>
              <div class="bomright">
                <p>4个活动</p>
              </div>
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="距离最近">
        <ul>
          <li v-for="item in 10">
            <!-- 列表上部分 -->
            <div class="listtop">
              <div class="left">
                <img
                  src="https://cube.elemecdn.com/D/73/8B2C479DA4DD38B25274B1268ED46jpeg.jpeg?x-oss-process=image/format,webp/resize,w_130,h_130,m_fixed"
                  alt
                />
              </div>
              <div class="right">
                <h2>
                  华风宾馆(正义路店)
                  <span>...</span>
                </h2>
                <p>
                  <van-rate :size="5" color="gold" void-icon="star" void-color="gold" />4.3月售8716单
                </p>
                <p>
                  ￥35起送|配送￥5
                  <span>4.59km|52分钟</span>
                </p>
              </div>
            </div>
            <!-- 列表下部分 -->
            <div class="listbom">
              <div class="bomleft">
                <div class="bomtext">
                  <span>盖浇饭</span>
                </div>
                <div class="bomp">
                  <p>
                    <span>减</span> 满25元减15元，满40元减17元，满58...
                  </p>
                  <p>
                    <span>特</span> 特价商品0.88元起
                  </p>
                </div>
              </div>
              <div class="bomright">
                <p>4个活动</p>
              </div>
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="销量最高">
        <ul>
          <li v-for="item in 10">
            <!-- 列表上部分 -->
            <div class="listtop">
              <div class="left">
                <img
                  src="https://cube.elemecdn.com/6/34/207e65ae1b760251ea5441ff9069cjpeg.jpeg?x-oss-process=image/format,webp/resize,w_130,h_130,m_fixed"
                  alt
                />
              </div>
              <div class="right">
                <h2>
                  胖大厨(朝阳门店)
                  <span>...</span>
                </h2>
                <p>
                  <van-rate :size="5" color="gold" void-icon="star" void-color="gold" />4.3月售8716单
                </p>
                <p>
                  ￥35起送|配送￥5
                  <span>4.59km|52分钟</span>
                </p>
              </div>
            </div>
            <!-- 列表下部分 -->
            <div class="listbom">
              <div class="bomleft">
                <div class="bomtext">
                  <span>盖浇饭</span>
                </div>
                <div class="bomp">
                  <p>
                    <span>减</span> 满25元减15元，满40元减17元，满58...
                  </p>
                  <p>
                    <span>特</span> 特价商品0.88元起
                  </p>
                </div>
              </div>
              <div class="bomright">
                <p>4个活动</p>
              </div>
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="筛选">
        <ul>
          <li v-for="item in 10">
            <!-- 列表上部分 -->
            <div class="listtop">
              <div class="left">
                <img
                  src="https://cube.elemecdn.com/6/34/207e65ae1b760251ea5441ff9069cjpeg.jpeg?x-oss-process=image/format,webp/resize,w_130,h_130,m_fixed"
                  alt
                />
              </div>
              <div class="right">
                <h2>
                  胖大厨(朝阳门店)
                  <span>...</span>
                </h2>
                <p>
                  <van-rate :size="5" color="gold" void-icon="star" void-color="gold" />4.3月售8716单
                </p>
                <p>
                  ￥35起送|配送￥5
                  <span>4.59km|52分钟</span>
                </p>
              </div>
            </div>
            <!-- 列表下部分 -->
            <div class="listbom">
              <div class="bomleft">
                <div class="bomtext">
                  <span>盖浇饭</span>
                </div>
                <div class="bomp">
                  <p>
                    <span>减</span> 满25元减15元，满40元减17元，满58...
                  </p>
                  <p>
                    <span>特</span> 特价商品0.88元起
                  </p>
                </div>
              </div>
              <div class="bomright">
                <p>4个活动</p>
              </div>
            </div>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      options: [
        "全部",
        "面食粥店",
        "简餐便当",
        "汉堡披萨",
        "香锅冒菜",
        "小吃炸串",
        "地方菜系",
        "日韩料理",
        "轻餐简食",
      ],
    };
  },
  computed: {
    ...mapState(["sales"]),
  },
  methods: {
    toDetail(id, item) {
      this.$router.push({ name: "shop", params: { id }, query: item });
    },
  },
  mounted() {
    setTimeout(async () => {
      let url = "http://localhost:8080/data/sales.json";
      let res = await this.$axios.get(url);
      this.$store.dispatch("getsales", res.data);
      //
      let url2 = "http://localhost:8080/data/sales.json";
      let res2 = await this.$axios.get(url2);
      this.$store.dispatch("getsales", res2.data);
    }, 1000);
  },
  created() {
    this.$bus.$emit("footernav", false);
  },
  beforeDestroy() {
    this.$bus.$emit("footernav", true);
  },
};
</script>

<style lang="less" scoped>
.listtop {
  margin-top: 20px;
  margin-left: 5px;
  height: 64px;
  .left {
    width: 64px;
    height: 64px;
    float: left;
    border: 1px solid rgba(0, 0, 0, 0.08);
    img {
      width: 100%;
    }
  }
  .right {
    float: left;
    margin-left: 5px;
    h2 {
      color: #333;
      font-weight: 700;
      font-size: 14px;
      overflow: hidden;
      margin-right: 80px;
      span {
        margin-left: 40px;
      }
    }
    p {
      color: #666;
      font-size: 12px;
      margin-top: 5px;
      span {
        margin-left: 60px;
      }
    }
  }
}

.listbom {
  width: 280px;
  height: 76px;
  color: #666;
  font-size: 12px;
  margin-top: 10px;
  margin-left: 80px;
  display: flex;
  justify-content: space-between;
  .bomleft {
    width: 230px;
    height: 69px;
    .bomtext {
      margin-bottom: 10px;
      span {
        border: 1px solid #ccc;
        font-weight: normal;
      }
    }
    .bomp {
      width: 230px;
      height: 36px;
      p {
        width: 230px;
        height: 18px;
        margin-bottom: 5px;
        overflow: hidden;
        span {
          font-size: 14px;
          background-color: rgb(240, 115, 115);
          color: #fff;
          margin-right: 5px;
        }
      }
    }
  }
  .bomright {
    width: 59px;
    height: 36px;
    margin-top: 30px;
    p {
      color: #999;
      font-size: 10px;
    }
  }
}
</style>